<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div style="margin-top: 20px;">

    <div class="search_block">
        搜索：
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_name" name="s_name"  placeholder="项名称" autocomplete="off">
            </div>
        </div>

        <button class="layui-btn" id="search_btn" data-type="search">搜索</button>
        <label class="tip">${stateMsg}</label>
        <button class="layui-btn" style="float: right;padding-right: 10px" id="add_btn" data-type="add">添加新交付项</button>
    </div>

    <table class="layui-hide" id="storeIns_table" lay-filter="storeIns_table"></table>

    <%--操作条--%>
    <script type="text/html" id="tool_bar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


    <script>
        var util;
        layui.use(['table','layer','util','form'], function(){
            var table = layui.table,layer=layui.layer,$=layui.jquery,form=layui.form;
            util=layui.util;
            table.render({
                elem: '#storeIns_table'
                ,url:'/back/storein/load'
                ,cols: [[
                    {field:'code', width:200, title: '使用单编号' ,sort: true}
                    ,{field:'item',width:200,title:'项目名(单位)',templet:'#itemTpl'}
                    ,{field:'number',width:120,title:'数量'}
                    ,{field:'date',width:200,title:'日期',templet:'#dateTpl'}
                    ,{field:'handing',width:200,title:'加工方',templet:'#handingTpl'}
                    ,{field:'s_pay' ,width:120,title:'应付款'}
                    ,{field:'had_pay' ,width:120,title:'已付款'}
                    ,{field:'un_pay' ,width:120,title:'未付款'}
                    ,{field:'remark',title:'备注'}
                    ,{fixed: 'right', width:200,align:'center', toolbar: '#tool_bar'}
                ]]
                ,done:function () {
                }
                ,id:'id'
                ,page: true
                ,limit:10
            });

            //操作按钮监听模块
            table.on('tool(storeIns_table)',function (obj) {
                var data=obj.data;
                var event=obj.event;
                if(event=='edit'){
                    layer.open({
                        title:'修改页面'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['375px','520px']
                        , content: $('#storeIn_form')
                        ,success: function(layero, index){
                            $('#storeIn_form').attr('action','${pageContext.request.contextPath}/back/storein/modifyInfo');
                            $('#id').val(data.id);
                            $('#item').find("option[value='"+data.item.id+"']").prop("selected","selected");
                            $('#handing').find("option[value='"+data.handing.id+"']").prop("selected","selected");
                            $('#number').val(data.number);
                            $('#s_pay').val(data.s_pay);
                            $('#had_pay').val(data.had_pay);
                            $('#remark').val(data.remark);
                            $('#btn').text("提交修改");
                            form.render();
                        }
                    });
                }
                if(event=='del'){
                    layer.confirm('要删除这个交付单项吗?', function(index){
                        $.post("${pageContext.request.contextPath}/back/storein/delete",{id:data.id},function (state) {
                            var result=eval('('+state+')');
                            if(result){
                                layer.msg("删除成功");
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.msg("删除失败");
                                layer.close(index);
                            }
                        })
                    });
                }
            });

            //搜索添加模块
            var $ = layui.$, active = {
                search: function(){
                    var s_name = $('#s_name').val();
                    table.reload('id', {
                        where: {
                            s_name:s_name
                        }
                        ,page: {
                            curr:1
                        }

                    });
                }
                ,add:function () {
                    layer.open({
                        title:'添加新使用项'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['375px','520px']
                        , content: $('#storeIn_form')
                        ,success: function(layero, index){
                            $('#storeIn_form').attr('action','${pageContext.request.contextPath}/back/storein/add');
                            $('#number').val("");
                            $('#s_pay').val("");
                            $('#had_pay').val("");
                            $('#remark').val("");
                            $('#btn').text("提交添加");
                        }
                    });
                }
            };

            $('#search_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('#add_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });


        layui.use(['form', 'layedit'],function () {
            var form = layui.form;

            form.on('submit(check)', function(data){
                var datas=eval("("+data.field+")");
                if(datas.s_pay<datas.had_pay){
                    layer.alert("应付款大于已付款！")
                    return false;
                }

                return true;
            });


        });


        function formatItem(item) {
            return item.name+"("+item.unit+")";
        }

        function formatDate(t) {
            var date=new Date(t);
            return util.toDateString(date,'yyyy-MM-dd');
        }

        function formatHanding(handing){
            return handing.name;
        }
    </script>

    <script type="text/html" id="dateTpl">
         {{formatDate(d.date)}}
    </script>

    <script type="text/html" id="itemTpl">
        {{formatItem(d.item)}}
    </script>

    <script type="text/html" id="handingTpl">
        {{formatHanding(d.handing)}}
    </script>

</div>

<form id="storeIn_form" style="display: none" class="layui-form" action="#" method="post">
    <input type="hidden" id="id" name="id"/>
    <div class="info_form_body">

        <div class="layui-form-item">
            <label class="layui-form-label">选择货物项:</label>
            <div class="layui-input-block">
                <select id="item" name="item.id" lay-verify="required" lay-search="">
                    <c:forEach var="item" items="${items}">
                        <option value="${item.id}">${item.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">数量:</label>
            <div class="layui-input-block">
                <input id="number" type="text" name="number"  lay-verify="required|number" placeholder="数量" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">应付款:</label>
            <div class="layui-input-block">
                <input id="s_pay" type="text" name="s_pay"  lay-verify="required|number" placeholder="应付款" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">已付款:</label>
            <div class="layui-input-block">
                <input id="had_pay" type="text" name="had_pay"  lay-verify="required|number" placeholder="已付款" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择加工方:</label>
            <div class="layui-input-block">
                <select id="handing" name="handing.id" lay-verify="required" lay-search="">
                    <c:forEach var="handing" items="${handings}">
                        <option value="${handing.id}">${handing.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <textarea id="remark" name="remark" placeholder="备注" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="btn" lay-submit="" lay-filter="check" class="layui-btn"></button>
            </div>
        </div>
    </div>
</form>